<template>
  <div class="packets-box">
    <div class="red-packets">
      <div class="title">
        <p>恭喜你</p>
        <p>获得现金奖励</p>
      </div>
      <div class="money-box">
        <p>
          <b>{{amount | formatMoney}}</b>
          <span>元</span>
        </p>
        <p class="tips">红包已放入钱包中</p>
      </div>
    </div>
    <div class="action-btn" @click="goWallet">前往提现</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import wechatService from 'SERVICE/wechatService'
export default {
  data() {
    return {
      amount: '0',
      uuid: '',
      enterpriseId: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.uuid = localStorage.getItem('uuid') || ''
    this.enterpriseId = localStorage.getItem('enterpriseId') || ''
    let redPacket = sessionStorage.getItem('redPacket') || ''
    // 已领取就不在请求领取接口
    if (redPacket) {
      this.amount = redPacket
    } else {
      this.openRedPacket()
    }
  },
  methods: {
    openRedPacket() {
      let agentId = (this.userInfo && this.userInfo.agentId) || ''
      let officialAccountOpenId = agentId ? '' : sessionStorage.getItem('officialAccountOpenId')
      wechatService
        .openRedPacket({
          uuid: this.uuid,
          enterpriseId: this.enterpriseId,
          agentId: agentId,
          officialAccountOpenId: officialAccountOpenId
        })
        .then(res => {
          this.amount = res
          sessionStorage.setItem('redPacket', res)
        })
        .catch()
    },
    goWallet() {
      // 未登录先登录
      if (!this.userInfo.agentId) {
        this.$router.push(`/wx/login?redPacketAmount=${this.amount}&uuid=${this.uuid}&enterpriseId=${this.enterpriseId}&toPath=/money/wallet`)
      } else {
        this.$router.push('/money/wallet')
      }
    }
  },
  filters: {
    formatMoney(val) {
      if (val) {
        return (val / 100).toFixed(2)
      }
      return '0.00'
    }
  }
}
</script>

<style lang="less" scoped>
.packets-box {
  font-size: 14px;
  .red-packets {
    background-image: url('../../../assets/img/wx/redpackets.png');
    background-size: 100% 248px;
    background-repeat: no-repeat;
    color: #fdf6c2;
    text-align: center;
    height: 248px;
    .title {
      padding-top: 32px;
      font-size: 20px;
      color: rgba(253, 246, 194, 1);
      line-height: 28px;
    }
    .money-box {
      margin-top: 16px;
      b {
        height: 75px;
        font-size: 54px;
        color: rgba(253, 246, 194, 1);
        line-height: 75px;
      }
      span {
        margin-left: 6px;
      }
    }
  }
  .action-btn {
    width: 184px;
    padding: 12px 0;
    background: #f25038;
    box-shadow: 0px 2px 4px 0px rgba(253, 79, 72, 0.35);
    border-radius: 22px;
    margin: 84px auto;
    text-align: center;
    color: #fff;
    font-size: 16px;
  }
}
</style>